<template>
  <div id="drawProcessDesign">
    <a-button @click="getData">提交</a-button>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <div>这是一维数组{{ list }}</div>
      <div class="treeData" style="color:bule">这是树形结构{{ treeData }}</div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <FactoryDrawFlow
      @clickNode="clickNode"
      ref="flow"
      :FlowConfig="FlowConfig"
    ></FactoryDrawFlow>
  </div>
</template>
<style lang="less" scoped>
#drawProcessDesign {
  background: #f0f2f5;
}
.treeData {
  color: blue;
}
</style>

<script>
// @ is an alias to /src
export default {
  name: "Home",
  components: {},
  data() {
    return {
      dialogVisible: false,
      list: "",
      treeData: "",
      FlowConfig: [
        {
          id: "root",
          groupId: null,
          type: "1",
          title: "所有人",
          content: "请选择",
          isRow: true,
          isRoot: true,
          data: {}
        }
      ]
    };
  },
  created() {
    this.init();
  },
  methods: {
    getData() {
      let { list: res, treeData } = this.$refs.flow.getResData();
      this.list = JSON.stringify(res);
      this.treeData = JSON.stringify(treeData);
      console.log("这是返回的一维数组", treeData);
      this.dialogVisible = true;
    },
    /**
     * 1、创建一个row length 1
     * 2、创建一个col节点
     * 3、创建一组col length 1
     * return [{pid id type}]
     */
    getNodeArr() {
      this.FlowConfig = this.$refs.flow.getNodeArr();
      return this.FlowConfig;
    },
    init() {
      // this.FlowConfig = this.transform(this.FlowConfig);
    },
    clickNode(node) {
      console.log("当前点击节点", node);
    }
  }
};
</script>
